<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/jquery.min.js"></script>
    <script src="../static/echarts.min.js"></script>
    <title>Title</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: rgb(188, 227, 236);
        }
    </style>
</head>
<body>
<br>
可视化展示
<br><br>
项目编号：<input id="project">
<br><br>
<button id="a">柱状图</button>
<br><br>
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    //3.初始化实例对象 echarts.init(dom容器)
    var myChart = echarts.init(document.getElementById("main"));
    var project = document.getElementById("project");

    // 通过 setTimeout 模拟异步加载
    var data = {
        'categories': ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        'data': ['5', '20', '36', '10', '10', '20'],
    }


    //5.将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。


    function set(data, a) {
        var option = {
            title: {
                text: '单位多度柱状图'
            },
            tooltip: {},
            legend: {
                data: ['物理量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [
                {
                    name: '物理量',
                    type: 'bar',
                    data: []
                }
            ]
        };
        a.setOption(option);
        a.setOption({
            xAxis: {
                data: data.site
            },
            series: [
                {
                    // 根据名字对应到相应的系列
                    name: '物理量',
                    data: data.data
                }
            ]

        });

    }

    $("#a").click(function () {
        set(data, myChart)
        console.log('---')
    });


</script>
</body>
</html>